<%--
  Created by IntelliJ IDEA.
  User: gen3
  Date: 2020/4/11
  Time: 21:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="xyz.qduwo.entity.UserEntity" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <title>注册</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/imgupload.css">
    <script src="js/imgupload.js"></script>
    <script>
        var page = 1; //当前页面
        //显示page
        function show_page(page) {
            for(let i=1 ;i<4;i++){
                if(i===page){
                    $("#page_"+i).show();
                }else{
                    $("#page_"+i).hide();
                }
                if(page===3){
                    $("#submit").show();
                    $("#next_btn").hide();
                }

            }
        }
    </script>
    <script>
        //图片上传
        $(function(){
            var img2 = new ImgUpload('.imgLog2',100,100,100);
            $(document).on('change',".imgLog2 input",function(e){
                //模拟后台返回url
                var url = window.URL.createObjectURL(e.target.files[0]);
                $(this).parent().css('background','url('+url+')0% 0% / cover')
                img2.setSpan(this)
            })
        })

    </script>

</head>
<body>
<header>
    <nav class="b_clear">
        <div class="nav_logo l_float">
            <img src="imgs/logo.svg" alt="">
        </div>
    </nav>
</header>
<div class="container">
    <div class="login_body l_clear">
        <div class="login_form l_float">
            <div class="login_top">
                互动画板
            </div>
            <div class="login_con">
                <form action="./RegisterServlet" method="POST" enctype="multipart/form-data">
                    <div id="page_1" class="animated flipInX">
                        <div class="form_tainer">
                            <label for="user_name">用户名</label>
                            <input type="text" name="username" id="user_name" placeholder="用户名(A-Z,0-9)">
                            <img src="imgs/icons/user.svg">
                            <p class="tips hidden">请检查您的账号</p>
                        </div>
                        <div class="form_tainer">
                            <label for="user_name">电子邮件地址</label>
                            <input type="email" name="email" id="email" placeholder="邮箱">
                            <img src="imgs/icons/user.svg">
                            <p class="tips hidden">请检查您的账号</p>
                        </div>
                    </div>
                   <div id="page_2" style="display: none" class="animated flipInX">
                       <div class="form_tainer">
                           <label for="user_pwd">密码</label>
                           <input type="password" name="password" id="user_pwd" placeholder="请输入账户密码">
                           <img src="imgs/icons/lock.svg">
                           <p class="tips hidden">请检查您的密码</p>
                       </div>
                       <div class="form_tainer">
                           <label for="user_pwd">昵称</label>
                           <input type="text" name="nickname" id="nickname" placeholder="昵称">
                           <img src="imgs/icons/lock.svg">
                           <p class="tips hidden">请检查您的密码</p>
                       </div>
                   </div>
                    <div id="page_3" style="display: none" class="animated flipInX">
                        <div class="form_tainer">
                            <label for="user_pwd">头像</label>
                            <div class="upload_img">
                                <div class="upload imgLog2">
                                    <span><i class="glyphicon glyphicon-open"></i>上传头像</span>
                                </div>
                            </div>
                            <p class="tips hidden">请上传头像</p>
                        </div>
                    </div>
                    <div class="b_clear submit form_tainer">
                        <button type="button" id="next_btn" onclick="show_page(++page)">下一步</button>
                        <button type="submit" id="submit" style="display: none">注 册</button>
                        <a href="./login.jsp" class="r_float">登录？</a>
                    </div>
                </form>
            </div>

            <div class="login_otherAccount">
                BUILD V20200413 Nightly
            </div>

        </div>
        <div class="login_ad l_float" id="AdImg">
            <a href="">查看详情</a>
        </div>
    </div>
    <div class="footer">
<%--        todo: 添加后台登录拦截器--%>
        <p>Copyright © 2020  事前诸葛亮 <a href="./admin/user_administrator.jsp">后台管理</a></p>
        <p>张淋 王宣文 张心雨 江浩</p>
    </div>
</div>

<script src="js/login.js"></script>
</body>
</html>
